<!--  -->
<template>
    <div class="message">
        <!-- <HeaderTop title="我的消息"></HeaderTop> -->
        <div class='content-box'>
            <p v-if='nodata' class='nodata'>
                <img class='nodataImg' src="../../assets/img/noData.png" alt="">
            </p>
            <div class="message-constainer" ref='wrapper' :style="{ height: wrapperHeight + 'px' }" v-else>
                <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :style="{ height: wrapperHeight + 'px' }"  :bottom-all-loaded="allLoaded" :bottom-drop-text="bottomText"  ref="loadmore">
                    <ul v-if="messageList&&messageList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}">
                        <li class="message-system" v-if="messageList&&messageList.length" v-for="(message,index) in messageList" :key="index" @click="showMessage(message)">
                            <img class="logo" src="../../assets/img/xiaoxi.png" alt="">
                            <p class="ellipsis" :class="{on:message.status}">{{message.messageTitle}}</p>
                            <!-- status 0是未读 展示黑色 1是已读 展示灰色 -->
                            <span :class="{on:message.status}">{{message.createTime}}</span>
                            <img class="zhankai" src="../../assets/img/zhankai1.png" alt="">
                        </li>
                        <p v-if="allLoaded" class='allloaded'>已加载全部</p>
                    </ul>
                </mt-loadmore>
            </div>
        </div>
    </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import { Loadmore } from 'mint-ui'
export default {
  data () {
    return {
        num:1,
        size:6,
        userId:null,
        token:'',
        readed:true,
        allLoaded:false,
        autofill:false,
        bottomText:"上拉加载更多",
        loadMoreConfig:{
            bottomDistance:100,
        },
        nodata:false,
        // messageList:[
        //     {
        //         "id": 1,
        //         "messageTitle": "养生常识养生常识养生常识",
        //         "messageContent": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
        //         "createTime": "2018-12-18 16:19:00",
        //         "userId": 2,
        //         "status": 0
        //     },
        //     {
        //         "id": 2,
        //         "messageTitle": "活动消息",
        //         "messageContent": "内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容",
        //         "createTime": "2018-12-18 16:19:00",
        //         "userId": 2,
        //         "status": 1
        //     },
        //     {
        //         "id": 2,
        //         "messageTitle": "aaaaaa",
        //         "messageContent": "内容内容内容内容内容内容内容内容内容内容内容内容",
        //         "createTime": "2018-12-18 16:19:00",
        //         "userId": 2,
        //         "status": 0
        //     }
        // ]
        messageList:[],
        wrapperHeight:'100%'
    };
    },

    components: {
        // HeaderTop
        'mt-loadmore':Loadmore
    },
    async created(){
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        this.getMessageList();
        // const result = await reqMessage({userId,token,num:this.num,size:this.size})
        // if(result.retCode === '000'){
        //     this.messageList = result.retData
        // }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted(){
        if(!this.nodata){
           this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
         
    },

    methods: {
        async  getMessageList(){
            const result = await this.API.reqMessage({userId:this.userId,token:this.token,num:this.num,size:this.size})
            if(result.retCode === '000'){
                this.messageList = result.retData
                if(this.messageList.length == 0){
                  this.nodata = true;
                }
            }
        },
        showMessage(message){
            this.$dialog.alert({
                title:message.messageTitle,
                message: message.messageContent
            }).then(()=>{
                // 点击确认就标记已读
                console.log(this.userId,this.token,message.id)
                // 异步向后台标记已读消息
                this.API.reqSignMessage({userId:this.userId,token:this.token,messageId:message.id}).then((data)=>{
                    console.log(data)
                    // 把消息变成灰色 表示已读
                    console.log(message.status)
                    message.status = 1
                    console.log(message.status)
                })
            })
        },
         //获取更多数据
        async getListDataPull(){
            console.log('num',this.num)
             let goodsId = this.$route.query.id
            let result = await this.API.reqMessage({userId:this.userId,token:this.token,num:this.num,size:this.size})
            console.log(result)
            if(result.retData==''||result.retData==[]||result.retData==null){
                this.isHaveMore(false) //禁止上拉
            }else{
                this.messageList = this.messageList.concat(result.retData?result.retData:[]);
                this.isHaveMore(true)
            }
        },
        //下拉刷新
       loadTop(){
         let self = this;
         this.num = 1;
         this.allLoaded = false;
         setTimeout(function(){
           self.getMessageList();
           self.$refs.loadmore.onTopLoaded();
        },1000)
       },
       // 上拉加载
        loadBottom(){
            let self = this;
            self.num ++;
            console.log('loadmore',this.num)
            setTimeout(function(){
                if(!self.nodata){
                    self.$refs.loadmore.onBottomLoaded();
                    self.getListDataPull();
                }
               
            },1000)
        },
        isHaveMore(isHaveMore){
            this.allLoaded = true; //true是禁止上拉加载
            if(isHaveMore){
              this.allLoaded = false;
             
            }
        },
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.message
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .nodata
        font-size 20px
        text-align center
        padding-top 30px
        .nodataImg
            width 150px
    .content-box
        height 100%
        .message-constainer
            top-border-1px(#e4e4e4)
            height 100%
            overflow-y scroll
        .message-system
            display flex
            height 80px
            // line-height 80px
            align-items center
            padding 0 20px
            // top-border-1px(#e4e4e4)
            bottom-border-1px(#e4e4e4)
            .logo
                height 40px

            p
                margin-left 15px
                margin-right 80px
                font-size 14px
                width 70px
                &.on
                    color #AAAAAA
            span 
                margin-right 10px
                &.on
                    color #AAAAAA
            .zhankai
                height 12px
.allloaded{
    width 100% !important
    text-align center  
}
</style>